﻿@using Think9.Models;
@model Think9.Models.ReportBasicEntity
@{
    ViewBag.Title = "Add";
    Layout = "~/Areas/Shared/_LayuiForm.cshtml";
}

<style>
    /* 防止table的下拉列表被隐藏*/
    .layui-table-cell {
        overflow: visible;
    }

    .layui-table-box {
        overflow: visible;
    }

    .layui-table-body {
        overflow: visible; /* 与移动端冲突 */
    }
    /* 设置下拉框的高度与表格单元相同 */
    td .layui-form-select {
        margin-top: -3px;
        margin-left: -7px;
        margin-right: -7px;
    }

    .layui-table-view .layui-table th {
        overflow: hidden;
    }
</style>

<form class="layui-form" lay-filter="formEdit">
    <input style="display:none" id="frm" value="@ViewBag.frm">
    <div class="layui-form-item">
        <label class="layui-form-label">选择分类</label>
        <div class="layui-input-block">
            @Html.DropDownList("ReportSort", (IEnumerable<SelectListItem>)ViewBag.SortList, "==请选择统计表分类==", new Dictionary<string, object> { })
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">统计表编码</label>
        <div class="layui-input-block">
            <input type="text" name="ReportId" id="ReportId" placeholder="统计表编码" autocomplete="off" class="layui-input" maxlength="30" readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">统计表名称</label>
        <div class="layui-input-block">
            <input type="text" name="ReportName" id="ReportName" placeholder="统计表名称" autocomplete="off" class="layui-input" lay-verify="required" maxlength="30">
        </div>
    </div>
    <div class="layui-form-item" id="divTB">
        <div class="layui-input-block layui-table-box" id="divTB2">
            <table class="layui-table" id="tableId" lay-filter="tableFilter"> </table>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required"> 选择字体</label>
        <div class="layui-input-block">
            <select id="FontStyle" name="FontStyle" lay-verify='required'>
                @foreach (valueTextEntity item in ((IEnumerable<valueTextEntity>)ViewBag.FontStyle))
                {
                    <option value="@item.Value">@item.Text</option>
                }
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备 注</label>
        <div class="layui-input-block">
            <textarea class="layui-textarea" id="ReportRemarks" name="ReportRemarks" placeholder='备注'></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"> </label>
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="edit">编 辑</button>
        </div>
    </div>
</form>
<script>
    layui.use(["table", "form", "exLayer", "exUtils"], function () {
        let form = layui.form;
        let layer = layui.layer;
        let exLayer = layui.exLayer;
        let exUtils = layui.exUtils;
        let table = layui.table;

        let $ = layui.$;

        form.render(); //

        //赋值
        form.val("formEdit", {
            "ReportSort": "@Model.ReportSort",
            "ReportId": "@Model.ReportId",
            "ReportName": "@Model.ReportName",
            "FontStyle": "@Model.FontStyle",
            "ReportRemarks": "@Model.ReportRemarks"
        });

        form.verify({
            name: function (value, item) {
                if (!new RegExp("^[\u4e00-\u9fa5_a-zA-Z0-9]+$").test(value)) {
                    return '名称由汉字、数字、字母、下划线组成，不得包含其他字符';
                }
            }
        });

        let ThisTable = table.render({
            elem: "#tableId",
            url: "/SysStats/Report/GetReportColList?rpId=" + $("#ReportId").val(),
            page: false,
            defaultToolbar: [{ title: '刷新', layEvent: 'refresh', icon: 'layui-bg-blue layui-icon-refresh' }],
            toolbar: "#toolbarTpl",
            cols: [[
                { field: "ColNum", title: "序号", width: 80, align: "center" },
                { field: "ColType", title: "类型", width: 130, templet: '#ColType' },
                { field: "ColWidth", title: "列宽(cm)", templet: '#ColWidth', width: 120 }

            ]],
            done: function (res, curr, count) {
                if (layui.device().mobile) {
                    $("#divTB2").attr("class", "layui-table-box");
                    $("#divTB").attr("class", "");
                }
            }
        });

        table.on("toolbar(tableFilter)", function (obj) {
            switch (obj.event) {
                case "editCols":
                    editCols();
                    break;
                case "refresh":
                    refresh();
                    break;
            }
        });

        form.on("submit(edit)", function (data) {
            var _list = [];
            foreachGridTable(_list);
            exUtils.ajax("/SysStats/Report/EditReport", "post", { "list": _list, entity: data.field }, true).done(function (response) {
                exLayer.greenTickMsg(response.message, function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                    $(window.parent.document).find('#btn_refresh').click();//刷新
                });
            }).fail(function (error) {
                console.log(error);
            });
            return false;
        });

        function foreachGridTable(_list) {
            var trList = $(".layui-table").find("tr");  //获取table下的所有tr
            for (var i = 0; i < trList.length; i++) {  //遍历所有的tr
                var tdArr = trList.eq(i).find("td"); //获取该tr下的所有td

                var _no = tdArr.eq(0).text();
                var _type = tdArr.eq(1).find('select').val();
                var _with = tdArr.eq(2).find('input').val();

                if (_no != '') {
                    var _row = {};
                    _row.ColNum = _no;
                    _row.ColWidth = _with;
                    _row.ColType = _type;

                    _list.push(_row);
                }
            }
        }

        function editCols() {
            exLayer.openMiddle("添加 || 移除列", "/SysStats/Report/EditReportCols?frm=edit&rpId=" + $("#ReportId").val(), '500px', '450px', layui.device().mobile);
        }

        function refresh() {
            ThisTable.reload({
                url: "/SysStats/Report/GetReportColList?rpId=" + $("#ReportId").val()
            });
        }

        //消息提示
        $(document).on("mouseenter", "*[lay-tips]", function () {
            var remind = $(this).attr("lay-tips");
            var tips = $(this).data("offset") || 4;
            var color = $(this).data("color") || '#88858e';
            layer.tips(remind, this, {
                time: -1,
                tips: [tips, color],
                area: ['auto', 'auto'],
            });
        }).on("mouseleave", "*[lay-tips]", function () {
            layer.closeAll("tips");
        });
    });
</script>
<script type="text/html" id="toolbarTpl">
    <button type="button" class="layui-btn layui-btn-warm layui-btn-sm" lay-event="editCols"><i class="fa fa-pencil"></i>添加 || 移除列</button>
</script>
<!-- 列宽 -->
<script type='text/html' id='ColWidth'>
    <input type="text" name="ColWidth" value="{{d.ColWidth}}" class="layui-input" maxlength="4" style="height:32px;" verify="required|number">
</script>
<!-- 类型 -->
<script type='text/html' id='ColType'>
    <div class='layui-input-inline' style='width:80px;'>
        <select lay-filter='ColType'>
            {{d.ColType_Exa}}
        </select>
    </div>
</script>